<template>
  <div class="tejia">
    <card @change="onChange" title="每日特价" :btns="data.map(v => v.cat_name)">
      <!-- 插槽的内容 要用template 包起来 -->
      <template>
        <div class="tejia-content">
          <!-- 左侧的商品 -->
          <div class="first">
            <img :src="data[tj_i].goods1[0].image" alt />
            <div class="title">{{data[tj_i].goods1[0].goods_name}}</div>
            <div class="price">
              ￥{{data[tj_i].goods1[0].tprice}}
              <span>￥{{data[tj_i].goods1[0].price}}</span>
              <p>热卖中</p>
              <div class="tag">{{data[tj_i].goods1[0].tag}}</div>
            </div>
          </div>
          <!-- 右侧的商品 -->
          <div v-for="(item, index) in data[tj_i].goods2" :key="index">
            <img :src="item.image" alt />
            <div class="title">{{item.goods_name}}</div>
            <div class="price">￥{{item.tprice}}</div>
          </div>
        </div>
      </template>
    </card>
  </div>
</template>

<script>
import Card from "~/components/Card";

export default {
  components: {
    Card
  },
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      tj_i: 0 // 特价商品组的下标
    };
  },
  methods: {
    // 从子组件里获取下标值
    onChange(i) {
      // 切换到第几组
      this.tj_i = i;
    }
  }
};
</script>

<style lang="scss">
.tejia {
  &-content {
    padding: 10px;
    background: #fff;
    overflow: hidden;
    & > div {
      float: left;
      width: 30%;
      padding: 20px 0;
      .title {
        height: 3em;
        overflow: hidden;
      }
      .price {
        color: red;
        font-weight: bold;
      }
    }
    .first {
      position: relative;
      margin-right: 20px;
      padding: 50px 0 10px 0;
      text-align: center;
      background: #f8f8f9;
      .title {
        padding: 5px 0;
        font-size: 14px;
        font-weight: bold;
      }
      .price {
        color: red;
        font-size: 18px;
        font-weight: bold;
        span {
          color: #ccc;
          font-size: 12px;
          text-decoration: line-through;
        }
      }
      img {
        width: 100px;
        height: 100px;
        float: none;
      }
      .tag {
        position: absolute;
        top: 0;
        left: 0;
        padding: 3px 10px;
        color: white;
        background: #fba62e;
      }
    }
    img {
      width: 74px;
      height: 74px;
      float: left;
      padding-right: 7px;
    }
  }
}
</style>